<template>
  <div>
    <van-panel title="已选用户">
      <template v-for="item in users">
        <van-tag type="success" style="margin-left: 15px;">{{item.name}}</van-tag>
      </template>
    </van-panel>

    <van-panel title="已选部门">
      <template v-for="item in departments">
        <van-tag type="primary" style="margin-left: 15px;">{{item.name}}</van-tag>
      </template>
    </van-panel>

    <van-row style="margin-top: 20px;">
      <van-col span="8">
        <van-button type="primary" @click="selectEnterpriseContact">通讯录</van-button>
      </van-col>
    </van-row>

    <van-cell-group>
      <van-field v-model="fileUrl" placeholder="请输入文件链接" label="文件预览">
        <template #button>
          <van-button size="small" type="primary" @click="previewFile">预览</van-button>
        </template>
      </van-field>
    </van-cell-group>

    <van-row style="margin-top: 20px;">
      <van-button type="info" @click="chooseImage">拍照或从手机相册中选图接口</van-button>
    </van-row>
    <van-row style="margin-top: 20px;">
      <van-button type="info" @click="todo">Todo List</van-button>
    </van-row>

    <van-cell-group>
      <van-field v-model="content" placeholder="请输入消息内容" label="文本消息">
        <template #button>
          <van-button size="small" type="primary" @click="send">发送</van-button>
        </template>
      </van-field>
    </van-cell-group>

  </div>
</template>

<script>
  import { Col, Row, Button, Tag, Panel, Field, CellGroup, Toast } from 'vant';
  import { sendMessage } from "@/api/wechat";

  export default {
    name: "list",
    components: {
      'van-row': Row,
      'van-col': Col,
      'van-button': Button,
      'van-tag': Tag,
      'van-panel': Panel,
      'van-field': Field,
      'van-cell-group': CellGroup
    },
    data() {
      return {
        users: [],
        departments: [],
        fileUrl: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
        content: ''
      }
    },
    methods: {
      selectEnterpriseContact() {
        let that = this;
        //填充已选部门
        let departmentIds = [];
        that.departments.forEach(item => departmentIds.push(item.id));

        //填充已选人员
        let userIds = [];
        that.users.forEach(item => userIds.push(item.id));

        wx.invoke("selectEnterpriseContact", {
            "fromDepartmentId": -1,// 必填，-1表示打开的通讯录从自己所在部门开始展示, 0表示从最上层开始
            "mode": "multi",// 必填，选择模式，single表示单选，multi表示多选
            "type": ["department", "user"],// 必填，选择限制类型，指定department、user中的一个或者多个
            "selectedDepartmentIds": departmentIds,// 非必填，已选部门ID列表。用于多次选人时可重入
            "selectedUserIds": userIds,// 非必填，已选用户ID列表。用于多次选人时可重入
            "includeExternalContact": 1 //非必填，是否包含外部联系人。
          }, function (res) {
            if (res.err_msg == "selectEnterpriseContact:ok") {
              if (typeof res.result == 'string') {
                res.result = JSON.parse(res.result) //由于目前各个终端尚未完全兼容，需要开发者额外判断result类型以保证在各个终端的兼容性
              }
              /* var selectedDepartmentList = res.result.departmentList;// 已选的部门列表
               for (var i = 0; i < selectedDepartmentList.length; i++) {
                 var department = selectedDepartmentList[i];
                 var departmentId = department.id;// 已选的单个部门ID
                 var departemntName = department.name;// 已选的单个部门名称
               }*/
              that.departments = res.result.departmentList;
              that.users = res.result.userList;
              console.log(that.users)
              /*
               var selectedUserList = res.result.userList; // 已选的成员列表
               for (var i = 0; i < selectedUserList.length; i++) {
                 var user = selectedUserList[i];
                 var userId = user.id; // 已选的单个成员ID
                 var userName = user.name;// 已选的单个成员名称
                 var userAvatar = user.avatar;// 已选的单个成员头像
                 var userIsExternal = user.isExternal; //已选的单个成员是否外部联系人
               }*/
            }
          }
        );
      },
      chooseImage() {
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            Toast.success(JSON.stringify(res.localIds));
            var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          }
        });
      },
      previewFile() {
        let that = this;
        WeixinJSBridge.invoke('previewFile', {
          url: that.fileUrl,
          name: '',
          size: 13000, // 需要预览文件的字节大小(必填)
        }, (resp) => {
          console.log(resp)
        })
        /*  wx.previewFile({
            url: that.fileUrl, // 需要预览文件的地址(必填，可以使用相对路径)
            name: '', // 需要预览文件的文件名(不填的话取url的最后部分)
            size: 1048576, // 需要预览文件的字节大小(必填)
            hidePreviewMenuList : [] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          });*/
      },
      todo() {
        this.$router.push({ path: '/todo' })
      },
      send() {
        if (this.users.length == 0 && this.departments.length == 0) {
          Toast.fail("请选择部门或人员");
          return;
        }
        if (this.content == '') {
          Toast.fail('请输入消息内容')
          return;
        }
        let departmentIds = [];
        this.departments.forEach(item => departmentIds.push(item.id));

        //填充已选人员
        let userIds = [];
        this.users.forEach(item => userIds.push(item.id));
        let message = {
          touser: userIds.join('|'),
          toparty: departmentIds.join('|'),
          totag: '',
          text: {
            content: this.content
          }
        };

        sendMessage(message);
      }
    }
  }
</script>

<style scoped>

</style>
